<template>
	<view class="gpDetail" :class="show?'maxH':''">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<navHeader :name='name' :code="code"></navHeader>	
		<!-- 顶部打包数据 开始-->
		<view class="flex padding-lr-xs bg_FFFFFF" style="padding: 20rpx;flex-direction: column;background-color: #FBFBFB;">
			<!-- 顶部展示1 开始 -->
			<view>
				<view class="text-xl color_E23232 text-center text-bold" style="color: red; font-size: 50rpx;" v-if="shares.P>=shares.YC">{{shares.P}}</view>
				<view class="text-xl color_E23232 text-center text-bold" style="color: green; font-size: 50rpx;" v-if="shares.P<shares.YC">{{shares.P}}</view>
				<view class="flex justify-center align-center margin-top" style="margin-top: 23rpx; margin-bottom: 32rpx;">
					<view class="text-sm color_E23232 margin-right-xs" style="color: red; font-size: 28rpx;" v-if="shares.P>=shares.YC">{{parseFloat(shares.P-shares.YC).toFixed(2)}}</view>
					<view class="text-sm color_E23232 margin-right-xs" style="color: green; font-size: 28rpx;" v-if="shares.P<shares.YC">{{parseFloat(shares.P-shares.YC).toFixed(2)}}</view>
					<view class="text-sm color_E23232" style="color: red; font-size: 28rpx;" v-if="shares.P>=shares.YC">{{parseFloat((shares.P-shares.YC) *10/shares.YC *10).toFixed(2)}}%</view>
					<view class="text-sm color_E23232" style="color: green; font-size: 28rpx;" v-if="shares.P<shares.YC">{{parseFloat((shares.P-shares.YC) *10/shares.YC *10).toFixed(2)}}%</view>
				</view>
			</view>
			<!-- 顶部展示1 结束 -->
			<!--
				color_E23232 红色
				color_99A2B5 灰色
				text-green   绿色
			-->
			<!-- 顶部展示2 开始 -->
		</view>
		<!-- 新：展示 -->
		<view class="flex-sub flex flx-row itemBox" style="justify-content: space-between;">
			<view class="items flx flx-col" style="width: 25vw;">
				<view class="item flx flx-bet">
					<text class="text-black text-df">今开</text>
					<text class="text-df" :class="shares.O > shares.YC ? 'color_E23232':'text-green'">{{shares.O}}</text>
				</view>
				<view class="item flx flx-bet">
					<text class="text-black text-df">昨收</text>
					<text class="color_99A2B5 text-df">{{shares.YC}}</text>
				</view>
			</view>
			
			<view class="items flx flx-col" style="width: 25vw;">
				<view class="item flx flx-bet">
					<text class="text-black text-df">最低</text>
					<text class="color_99A2B5 text-df">{{shares.L}}</text>
				</view>
				<view class="item flx flx-bet">
					<text class="text-black text-df">最高</text>
					<text class="color_99A2B5 text-df">{{shares.H}}</text>
				</view>
			</view>
			
			<view class="items flx flx-col" style="width: 25vw;">
				<view class="item flx flx-bet">
					<text class="text-black text-df">振幅</text>
					<text class="text-df" :class="shares.O > shares.YC ? 'color_E23232':'text-green'">{{shares.VF}}</text>
				</view>
				<view class="item flx flx-bet">
					<text class="text-black text-df">市盈率</text>
					<text class="color_99A2B5 text-df">{{shares.SY}}</text>
				</view>
			</view>
		</view>
		<!-- 旧：展示 -->
		<!-- <view class="flex-sub">
			<view class="">
				<view class="flex justify-between align-center padding-tb-sm">
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">今开</text>
						<text class="text-df" :class="shares.O > shares.YC ? 'color_E23232':'text-green'">{{shares.O}}</text>
					</view>
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">昨收</text>
						<text class="color_99A2B5 text-df">{{shares.YC}}</text>
					</view>
					
				</view>
				<view class="flex justify-between align-center padding-tb-sm">
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">最低</text>
						<text class="color_99A2B5 text-df">{{shares.L}}</text>
					</view>
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">最高</text>
						<text class="color_99A2B5 text-df">{{shares.H}}</text>
					</view>
		
				</view>
				<view class="flex justify-between align-center padding-tb-sm">
		
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">振幅</text>
						<text class="text-df" :class="shares.O > shares.YC ? 'color_E23232':'text-green'">{{shares.VF}}</text>
					</view>
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">成交量</text>
						<text class="color_99A2B5 text-df">{{shares.V}}</text>
					</view>
				</view>
				<view class="flex justify-between align-center padding-tb-sm">
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">成交额</text>
						<text class="color_99A2B5 text-df">{{shares.A/10000000}}亿</text>
					</view>
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">内盘</text>
						<text class="color_99A2B5 text-df">{{shares.IV}}</text>
					</view>
					
				</view>
				<view class="flex justify-between align-center padding-tb-sm">
		
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">市盈率</text>
						<text class="color_99A2B5 text-df">{{shares.SY}}</text>
					</view>
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">总市值</text>
						<text class="color_99A2B5 text-df">{{shares.ZS}}</text>
					</view>
				</view>
				<view class="flex justify-between align-center padding-tb-sm">
		
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">市盈率</text>
						<text class="text-df" :class="shares.O > shares.YC ? 'color_E23232':'text-green'">{{shares.SY}}</text>
					</view>
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">总市值</text>
						<text class="color_99A2B5 text-df">{{shares.ZS}}</text>
					</view>
				</view>
				<view class="flex justify-between align-center padding-tb-sm">
					<view class="flex-sub">
						<text class="text-black text-df margin-right-xs">流通市值</text>
						<text class="text-green text-df">{{shares.LS}}</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 顶部展示2 结束 -->
		<!-- 顶部打包数据 结束-->
		
		<!-- 折线图 一大堆 开始  -->
		<u-tabs :list="list" :is-scroll="false" active-color="red" :current="current" @change="change"></u-tabs>
		<u-empty text="当日没有数据" mode="list" v-if="data.length == 0"></u-empty>
		<!-- K线图 -->
		<view class="qiun-columns" v-if="current==2 || current==3 || current==4 || current==5|| current==6 || current==7">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt qiun-rows" v-if="data.length != 0">
				<!-- <view style="flex: 1;qiun-rows;text-align: right; margin-top: 6rpx; margin-right: 6rpx;">
					<button type="default" size="mini" @tap="tapButton('in')">放大</button>
					<button type="default" size="mini" style="margin-left: 20upx;" @tap="tapButton('out')">缩小</button>
				</view> -->
			</view>
			<view class="qiun-charts" v-if="data.length != 0">
				<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" disable-scroll=true @touchstart="touchCandle"
				 @touchmove="moveCandle" @touchend="touchEndCandle"></canvas>
			</view>
						
			<view class="qiun-padding qiun-bg-white ">
				<slider :value="itemCount" min="5" :max="sliderMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove"
				 @change="sliderMove" />
			</view> 
			
		</view>
		<!-- 折线图 -->
		<view class="qiun-columns" v-if="current==0 || current==1">
			<view class="qiun-charts" v-if="data.length != 0">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
				 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
			</view>
		</view>
		<!--  动态-->
		<!-- 折线图 一大堆 结束  -->
		
		<!-- 买盘当 start-->
		<view class="flex padding-lr-sm bg_FFFFFF padding-top">
			<!-- 买 开始 -->
			<view class="flex-sub">
				<view class="text-xl text-center" style="color: #E54D42;">买入</view>
				<view class="margin-top margin-1">
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">买1</view>
						<view class="flex-sub text-df color_E23232">{{parseFloat(shares.B1).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">买2</view>
						<view class="flex-sub text-df color_E23232">{{parseFloat(shares.B2).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">买3</view>
						<view class="flex-sub text-df color_E23232">{{parseFloat(shares.B3).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">买4</view>
						<view class="flex-sub text-df color_E23232">{{parseFloat(shares.B4).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">买5</view>
						<view class="flex-sub text-df color_E23232">{{parseFloat(shares.B5).toFixed(2)}}</view>
					</view>

				</view>
			</view>
			<!-- 买 结束 -->
			<!-- 卖 开始 -->
			<view class="flex-sub">
				<view class="text-xl color_A6AFC3 text-center" style="color: #E54D42;">卖出</view>
				<view class="margin-top">
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">卖1</view>
						<view class="flex-sub text-df text-green">{{parseFloat(shares.S1V).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">卖2</view>
						<view class="flex-sub text-df text-green">{{parseFloat(shares.S2V).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">卖3</view>
						<view class="flex-sub text-df text-green">{{parseFloat(shares.S3V).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">卖4</view>
						<view class="flex-sub text-df text-green">{{parseFloat(shares.S4V).toFixed(2)}}</view>
					</view>
					
					<view class="flex justify-between align-center margin-bottom-sm">
						<view class="flex-sub text-df color_A6AFC3">卖5</view>
						<view class="flex-sub text-df text-green">{{parseFloat(shares.S5V).toFixed(2)}}</view>
					</view>
			
				</view>
			</view>
			<!-- 卖 结束 -->
		</view>
		<view style="height: 100upx;"></view>
		<!-- 买盘当 end-->
		
		<!-- 底部 start-->
		<view class="cu-bar foot" v-if="code!='SH000001' && code!='SZ399006' &&code!='SZ399001'&&code!='DJI'&&code!='IXIC'&&code!='DJI'&&code!='SPX'&&code!='FTSE'&&code!='GDAXI'&&code!='FCHI'&&code!='HSI'&&code!='N225'&&code!='DXY' && code!='HKHSI'">
			<view class="bg-red flex-sub text-center text-lg" style="height: 100upx;line-height: 100upx;" @click="buy()">买入</view>
		</view>
		<!-- 底部 end-->

	</view>
</template>

<script>
	import navHeader from "@/component/navHeader.vue"
	import candle from "@/component/candle.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	
	var _self;
	var canvaCandle = null;
	var canvaLineA = null;
	
	export default {
		components: {
			navHeader,
			uniPopup,
			candle
		},
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight,//状态栏高度
				tabIndex: 0,
				btnIndex: 0,
				show: false,
				name: "",
				code: "",
				shares: {},
				timer: "",
				list: [{
					name: '当日'
				}, {
					name: '五日'
				}, {
					name: '1分K'
				}, {
					name: '5分K'
				}, {
					name: '15分K'
				}, {
					name: '60分K'
				}, {
					name: '日K'
				}],
				current: 6,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				itemCount: 20, //x轴单屏数据密度
				sliderMax: 50,
				data: []
			};
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			},
			change(index) {
				this.current = index;
				if (index == 0 || index == 1) {
					this.getServerDataLine();
				} else {
					this.getServerDataK();
				}
			},
			buy() {
				uni.navigateTo({
					url: "/pages/trading/buy?name=" + this.shares.N + "&code=" + this.shares.FS,
				})
			},
			getSharesQuery: function() {
				this.$Request.post(this.$api.index.getSharesQuery, {
					code: this.code,
				}).then(res => {
					this.shares = res.data;
				})
			},
			//折线图当日
			getServerDataLine() {
				let that = this;
				let period = '';
				if (this.current == 0) {
					period = '1M';
				} else if (this.current == 1) {
					period = 'D';
				}
				this.$Request.post(this.$api.index.getDayLine, {
					code: this.code,
					period: period
				}).then(res => {
					let categories = [];
					let series = [];
					this.data = res.data;
					if (this.data.length == 0) {
						return
					}
					res.data.forEach(function(item, index) {
						if (that.current == 0) {
							categories.push(item.D.substring(10, item.D.length));
						} else {
							categories.push(item.D.substring(5, 10));
						}
						series.push(item.C.toFixed(2));
					})
					let LineA = {
						categories: [],
						series: []
					};
					LineA.categories = categories;
					LineA.series = [{
						"data": series,
						"name": "价格",
						"itemStyle":{
							"normal":{
								"lineStyle":{
									color:"red"
								}
							}
						}
					}];
					_self.showLineA("canvasLineA", LineA);
				})
			
			},
			showLineA(canvasId, chartData) {
				console.log(chartData);
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					dataPointShape: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type: 'grid',
						itemCount: 5,
						scrollShow: true,
						scrollAlign: 'right',
						scrollBackgroundColor: '#F7F7FF',
						scrollColor: '#DEE7F7',
						labelCount: 5,
						itemCount: 200,
					},
					yAxis: {
						type:'value',
						scale:true,
						gridColor: '#CCCCCC',
						format: (val) => {
							return val.toFixed(2)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: false,
					extra: {
						line: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						}
					}
				});
			
			},
			touchLineA(e) {
				canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			touchEndLineA(e) {
				canvaLineA.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			//K线图
			getServerDataK() {
				let that = this;
				let period = '';
				if (this.current == 2) {
					period = '1M';
				} else if (this.current == 3) {
					period = '5M';
				} else if (this.current == 4) {
					period = '15M';
				} else if (this.current == 5) {
					period = '1H';
				} else if (this.current == 6) {
					period = 'D';
				}
				this.$Request.post(this.$api.index.getDayLine, {
					code: this.code,
					period: period
				}).then(res => {
					let categories = [];
					let series = [];
					this.data = res.data;
					if (this.data.length == 0) {
						return
					}
					var high=0;
					var min=20000;
					res.data.forEach(function(item, index) {
			
						if (that.current == 2 || that.current == 3 || that.current == 4) {
							categories.push(item.D.substring(10, item.D.length));
						} else if (that.current == 5) {
							categories.push(item.D.substring(8, item.D.length));
						} else {
							categories.push(item.D.substring(5, 10));
						}
						if(item.H>high){
							high=item.H;
						}
						if(item.L<min){
							min=item.L;
						}
						//开盘，收盘，最低，最高
						series.push([item.O, item.C, item.L, item.H]);
					})
					let Candle = {
						categories: [],
						series: []
					};
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					Candle.categories = categories;
					Candle.series = [{
						"data": series,
						"name": this.name,
						legendShape: "circle",
						pointShape: "circle",
						show: true,
						type: "candle"
					}];
					// _self.textarea = Candle;
					_self.showCandle("canvasCandle", Candle,high,min);
				})
			},
			showCandle(canvasId, chartData,high,min) {
				var offset = high - min;
				canvaCandle = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'candle',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 8,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					enableMarkLine: true,
					/***需要开启标记线***/
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: true, //不绘制X轴网格线
						labelCount: 4, //X轴文案数量
						itemCount: 50, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'right',
					},
					yAxis: {
						// type:"value",
						// scale:true,
						type:'value',
						scale:false,
						format: (val) => {
							return val.toFixed(0)
						},
						max:high + offset * 0.05,
						min:min - offset * 0.05
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: false,
					dataPointShape: true,
					extra: {
						candle: {
							color: {
								upLine: '#f04864',
								upFill: '#f04864',
								downLine: '#2fc25b',
								downFill: '#2fc25b'
							},
							average: {
								show: true,
								name: ['MA5', 'MA10', 'MA30'],
								day: [5, 10, 30],
								color: ['#1890ff', '#2fc25b', '#facc14']
							}
						},
						tooltip: {
							bgColor: '#000000',
							bgOpacity: 0.7,
							gridType: 'dash',
							dashLength: 5,
							gridColor: '#1890ff',
							fontColor: '#FFFFFF',
							horizentalLine: true,
							xAxisLabel: true,
							yAxisLabel: true,
							labelBgColor: '#DFE8FF',
							labelBgOpacity: 0.95,
							labelAlign: 'left',
							labelFontColor: '#666666'
						}
					}
				});
			
			},
			touchCandle(e) {
				canvaCandle.scrollStart(e);
			},
			moveCandle(e) {
				canvaCandle.scroll(e);
			},
			touchEndCandle(e) {
				canvaCandle.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaCandle.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			tapButton(type) {
				let step = 5;
				if (type == 'in') {
					_self.itemCount -= step;
					if (_self.itemCount <= 5) {
						_self.itemCount = 5;
					}
				} else {
					_self.itemCount += step;
					if (_self.itemCount >= _self.sliderMax) {
						_self.itemCount = _self.sliderMax;
					}
				}
				_self.zoomCandle(_self.itemCount);
			},
			sliderMove(e) {
				_self.itemCount = e.detail.value;
				_self.zoomCandle(e.detail.value);
			},
			zoomCandle(val) {
				canvaCandle.zoom({
					itemCount: val
				});
			},
			checkLogin() {
				this.$Request.get(this.$api.index.checkLogin).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/member/login",
						})
					}
				})
			},
			// addSharesStop() {
			// 	if (this.code && this.name) {
			// 		if (this.code != 'SH000001' && this.code != 'SZ399006' && this.code != 'SZ399001') {
			// 			this.$Request.post(this.$api.index.addSharesStop, {
			// 				code: this.code,
			// 				name: this.name
			// 			}).then(res => {})
			// 		}
			// 	}
			// }
		},
		onShow() {
			_self = this;
			this.timer = setInterval(function() {
				_self.getSharesQuery();
			}, 2000);
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		onLoad(e) {
			this.checkLogin();
			this.name = e.name;
			this.code = e.code;
			this.getSharesQuery();
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cHeight2 = uni.upx2px(200);
			this.getServerDataK();
			// this.addSharesStop();
		}
	}
</script>

<style lang="scss" scoped>
	@import "./sharesInfo.scss";
	@import "./gpDetail.scss";
	.itemBox{
		padding: 0 16rpx;
		.items{
			font-size: 26rpx; 
			.item{
				margin: 17rpx 0;
			}
		}
	}
</style>
